<template>
    <view class="container">
        <view class="index-container">
            <text class="plain">No.</text>
            <text class="index">{{ normalizedIndex }}</text>
            <view class="line"></view>
        </view>
        <view class="date-container">
            <text class="month">{{ month }}</text>
            <text class="year">{{ year }}</text>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        index: Number
    },
    data () {
        return {
            // 月份的中文
            months: [
                '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月',
                '十二月'
            ],
            //年份
            year: '0',
            // 月份
            month: ''
        }
    },
	// 是一个计算属性，就是把需要计算的放在这个里面
    computed: {
        // 给index加个0
        normalizedIndex () {
			// 设index为空
            let index = null
			// 如果index小于10那么就要在index前面加0
            if (this.index < 10) {
                index = '0' + this.index
            }
			// 返回index的结果
            return index
        }
    },
	// 生命周期钩子函数，调用下面的handelInit函数
    created () {
		// 调用处理时间函数
        this.handelInit()
    },
    methods: {
        // 处理时间
        handelInit () {
			// 当前日期
            let date = new Date()
			// 当前月份
            let month = date.getMonth()
			// 当前年份
            this.year = date.getFullYear()
			// 汉字月份
            this.month = this.months[month]
        }
    }
}
</script>

<style lang='scss' scoped>
 .container{
	 height: 60rpx;
	 display: inline-flex;
	 flex-direction: row;
 }
 .index-container{
	 display: flex;
	 flex-direction: row;
	 align-items: baseline;
 }
 .plain{
	 font-size: 32rpx;
 }
 .index{
	 font-size: 60rpx;
	 line-height: 60rpx;
	 font-weight: 800;
	 margin-right: 14rpx;
 }
 .line{
	 height: 44rpx;
	 margin-right: 14rpx;
	 border-left: 1px solid black;
 }
 .date-container{
	 display: flex;
	 flex-direction: column;
	 margin-top: 5rpx;
 }
 .month{
	 font-size: 24rpx;
	 line-height: 24rpx;
 }

 .year{
	 font-size: 20rpx;
 }
</style>
